fix(examples): guard missing mount targets in remaining react examples by grzdev · Pull Request #10305 · TanStack/query

grzdev · 2026-03-20T19:26:27Z

🎯 Changes

Adds safety guards for mount targets in the remaining React examples that were not covered in #10226.

Why

Consistent with #10226, these examples used unsafe patterns such as:

document.getElementById('root') as HTMLElement
non-null assertions like rootElement!

If the DOM element is missing or renamed, the example can crash at runtime with an unclear error. Adding explicit runtime guards improves reliability and developer experience.

Changes

Replaces unsafe root element lookups in 10 remaining React examples
Throws a clear error when the #root mount target is missing
Passes the verified element into ReactDOM.createRoot()

Scope

Examples-only change. No package/runtime changes.

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Release Notes

Bug Fixes
- Improved error handling across multiple React example applications to provide clearer feedback when the application root element is missing, preventing silent failures and enabling faster error detection during development.

coderabbitai · 2026-03-20T19:26:55Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3f185acc-0359-49f2-a38b-e2885a6ef9d2

📥 Commits

Reviewing files that changed from the base of the PR and between 3b7a177 and 7f3b02d.

📒 Files selected for processing (10)

examples/react/algolia/src/index.tsx
examples/react/basic-graphql-request/src/index.tsx
examples/react/chat/src/index.tsx
examples/react/default-query-function/src/index.tsx
examples/react/devtools-panel/src/index.tsx
examples/react/eslint-legacy/src/index.tsx
examples/react/offline/src/index.tsx
examples/react/playground/src/index.tsx
examples/react/react-router/src/index.tsx
examples/react/suspense/src/index.tsx

📝 Walkthrough

Walkthrough

The PR updates 10 React example entry files to replace TypeScript non-null assertions on DOM root element lookups with explicit runtime null guards that throw a clear error message when the mount target is missing.

Changes

Cohort / File(s)	Summary
React Examples Root Element Guard `examples/react/algolia/src/index.tsx`, `examples/react/basic-graphql-request/src/index.tsx`, `examples/react/chat/src/index.tsx`, `examples/react/default-query-function/src/index.tsx`, `examples/react/devtools-panel/src/index.tsx`, `examples/react/eslint-legacy/src/index.tsx`, `examples/react/offline/src/index.tsx`, `examples/react/playground/src/index.tsx`, `examples/react/react-router/src/index.tsx`, `examples/react/suspense/src/index.tsx`	Removed non-null type assertion (`as HTMLElement`) from `document.getElementById('root')` and added explicit runtime null guard that throws `Error('Missing` #root `element')` before calling `ReactDOM.createRoot(...).render(...)` in each file.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

fix(examples): guard missing mount targets in react examples #10226: Makes the same code-level change across React example entry files, replacing non-null assertions with guarded null checks.
fix(examples): guard missing mount target in preact simple example #10208: Applies the same pattern (non-null assertion removal plus runtime guard) to Preact examples instead of React.
fix(examples): guard missing mount targets in solid examples #10205: Implements identical bootstrap code pattern (replacing non-null assertions with runtime guards) across Solid example entry files.

Poem

🐰 A rabbit hops through code so bright,
No null sneaks past without a fight!
Each root element now guards with care,
Errors caught before they dare. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: adding safety guards for missing mount targets across React examples.
Description check	✅ Passed	The description follows the template structure, includes detailed explanation of changes, rationale, and correctly marks the release impact as docs/CI/dev-only with checklist items completed.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can disable sequence diagrams in the walkthrough.

Disable the reviews.sequence_diagrams setting to disable sequence diagrams in the walkthrough.

nx-cloud · 2026-03-20T19:27:06Z

View your CI Pipeline Execution ↗ for commit 7f3b02d

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	37s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	<1s	View ↗

☁️ Nx Cloud last updated this comment at 2026-03-20 19:28:26 UTC

pkg-pr-new · 2026-03-20T19:28:03Z

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@10305

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@10305

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10305

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@10305

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10305

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@10305

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@10305

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@10305

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@10305

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@10305

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@10305

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@10305

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@10305

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@10305

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@10305

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@10305

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@10305

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@10305

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@10305

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@10305

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@10305

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@10305

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@10305

commit: 7f3b02d

fix(examples): guard missing mount targets in remaining react examples

7f3b02d

TkDodo merged commit c7c0cd9 into TanStack:main Mar 22, 2026
9 of 10 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(examples): guard missing mount targets in remaining react examples#10305

fix(examples): guard missing mount targets in remaining react examples#10305
TkDodo merged 1 commit intoTanStack:mainfrom
grzdev:fix/examples-react-remaining-mount-guards

grzdev commented Mar 20, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Mar 20, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud bot commented Mar 20, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Mar 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

grzdev commented Mar 20, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

Why

Changes

Scope

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Poem

❌ Failed checks (1 warning)

Uh oh!

nx-cloud bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Mar 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

grzdev commented Mar 20, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 20, 2026 •

edited

Loading

nx-cloud bot commented Mar 20, 2026 •

edited

Loading